﻿@using RuoVea.ExDto
@using RuoVea.OmiReports
@using RuoVea.OmiReports.Language
@using RuoVea.OmiReports.Attributes
@using RuoVea.OmiReports.Options
@{
    AppConfig Reports = ConfigManages.Config ?? new AppConfig();
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Html.Raw(RuoVea.OmiReports.Language.i18n.paramReports)</title>
    <link href="~/ruoveaui/xg6rvft8p/avue/index.css" rel="stylesheet" />
    <link href="~/ruoveaui/xg6rvft8p/elementui/index.min.css" rel="stylesheet" />
</head>
<body>
    <div id="app" v-cloak>
        <avue-crud :data="tableData" :option="option" :permission="hasPermission" :page.sync="pageOption" :table-loading="loading"
                   v-on:refresh-change="refreshChange"
                   v-on:row-save="handleRowSave"
                   v-on:row-update="handleRowUpdate"
                   v-on:row-del="handleRowDel"
                   v-on:search-change="searchChange"
                   v-on:search-reset="resetChange"
                   v-on:on-load="onLoad">
            <template slot="connectionString" slot-scope="scope">
                <el-tooltip effect="dark" :content="scope.row.connectionString" placement="top">
                    <span>{{ scope.row.connectionString ? scope.row.connectionString.substring(0, 120) + '...' : '' }}</span>
                </el-tooltip>
            </template>
            <template slot="menu" slot-scope="scope">
                <el-button icon="el-icon-connection" size="mini" type="text" @@click="handleTestConnection(scope.row)">
                    {{i18n.t('connection_test')}}
                </el-button>
            </template>
        </avue-crud>
    </div>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.i18n.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.lang.js"></script>
    <script>
        Vue.prototype.i18n.messages.zhCN = { ...Vue.prototype.i18n.messages.zhCN, ...{"connection_test": "连接测试","datasource_name": "数据源名称","please_enter_datasource_name": "请输入数据源名称","datasource_type": "数据源类型","please_select_datasource_type": "请选择数据源类型","connection_string": "连接字符串","please_enter_connection_string": "请输入连接字符串","confirm_test_connection": "是否测试数据源","connection_test_successful": "连接测试成功","connection_test_failed": "连接测试失败","connection_test_success_save": "连接测试成功，开始保存数据...","connection_test_failed_check": "连接测试失败，请检查连接字符串","connection_test_success_update": "连接测试成功，开始更新数据...","add_datasource_config": "添加数据源配置","edit_datasource_config": "修改数据源配置"} };
        Vue.prototype.i18n.messages.en = { ...Vue.prototype.i18n.messages.en, ...{"connection_test": "Connection Test","datasource_name": "Data Source Name","please_enter_datasource_name": "Please enter data source name","datasource_type": "Data Source Type","please_select_datasource_type": "Please select data source type","connection_string": "Connection String","please_enter_connection_string": "Please enter connection string","confirm_test_connection": "Test connection for data source","connection_test_successful": "Connection test successful","connection_test_failed": "Connection test failed","connection_test_success_save": "Connection test successful, starting to save data...","connection_test_failed_check": "Connection test failed, please check the connection string","connection_test_success_update": "Connection test successful, starting to update data...","add_datasource_config": "Add Data Source Configuration","edit_datasource_config": "Edit Data Source Configuration"} };
        Vue.prototype.i18n.messages.fr = { ...Vue.prototype.i18n.messages.fr, ...{"connection_test": "Test de Connexion","datasource_name": "Nom de la Source de Données","please_enter_datasource_name": "Veuillez saisir le nom de la source de données","datasource_type": "Type de Source de Données","please_select_datasource_type": "Veuillez sélectionner le type de source de données","connection_string": "Chaîne de Connexion","please_enter_connection_string": "Veuillez saisir la chaîne de connexion","confirm_test_connection": "Tester la connexion pour la source de données","connection_test_successful": "Test de connexion réussi","connection_test_failed": "Échec du test de connexion","connection_test_success_save": "Test de connexion réussi, début de la sauvegarde des données...","connection_test_failed_check": "Échec du test de connexion, veuillez vérifier la chaîne de connexion","connection_test_success_update": "Test de connexion réussi, début de la mise à jour des données...","add_datasource_config": "Ajouter la Configuration de Source de Données","edit_datasource_config": "Modifier la Configuration de Source de Données"} };
        Vue.prototype.i18n.messages.ja = { ...Vue.prototype.i18n.messages.ja, ...{"connection_test": "接続テスト","datasource_name": "データソース名","please_enter_datasource_name": "データソース名を入力してください","datasource_type": "データソースタイプ","please_select_datasource_type": "データソースタイプを選択してください","connection_string": "接続文字列","please_enter_connection_string": "接続文字列を入力してください","confirm_test_connection": "データソースの接続をテストしますか","connection_test_successful": "接続テスト成功","connection_test_failed": "接続テスト失敗","connection_test_success_save": "接続テスト成功、データの保存を開始します...","connection_test_failed_check": "接続テスト失敗、接続文字列を確認してください","connection_test_success_update": "接続テスト成功、データの更新を開始します...","add_datasource_config": "データソース設定の追加","edit_datasource_config": "データソース設定の編集"} };
        Vue.prototype.i18n.messages.vi = { ...Vue.prototype.i18n.messages.vi, ...{"connection_test": "Kiểm tra Kết nối","datasource_name": "Tên Nguồn Dữ liệu","please_enter_datasource_name": "Vui lòng nhập tên nguồn dữ liệu","datasource_type": "Loại Nguồn Dữ liệu","please_select_datasource_type": "Vui lòng chọn loại nguồn dữ liệu","connection_string": "Chuỗi Kết nối","please_enter_connection_string": "Vui lòng nhập chuỗi kết nối","confirm_test_connection": "Kiểm tra kết nối cho nguồn dữ liệu","connection_test_successful": "Kiểm tra kết nối thành công","connection_test_failed": "Kiểm tra kết nối thất bại","connection_test_success_save": "Kiểm tra kết nối thành công, bắt đầu lưu dữ liệu...","connection_test_failed_check": "Kiểm tra kết nối thất bại, vui lòng kiểm tra chuỗi kết nối","connection_test_success_update": "Kiểm tra kết nối thành công, bắt đầu cập nhật dữ liệu...","add_datasource_config": "Thêm Cấu hình Nguồn Dữ liệu","edit_datasource_config": "Sửa Cấu hình Nguồn Dữ liệu"} };
        Vue.prototype.i18n.messages.zhTW = { ...Vue.prototype.i18n.messages.zhTW, ...{"connection_test": "連接測試","datasource_name": "數據源名稱","please_enter_datasource_name": "請輸入數據源名稱","datasource_type": "數據源類型","please_select_datasource_type": "請選擇數據源類型","connection_string": "連接字符串","please_enter_connection_string": "請輸入連接字符串","confirm_test_connection": "是否測試數據源","connection_test_successful": "連接測試成功","connection_test_failed": "連接測試失敗","connection_test_success_save": "連接測試成功，開始保存數據...","connection_test_failed_check": "連接測試失敗，請檢查連接字符串","connection_test_success_update": "連接測試成功，開始更新數據...","add_datasource_config": "添加數據源配置","edit_datasource_config": "修改數據源配置"} };
    </script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhCN.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/en.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/fr.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/ja.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/vi.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "@Reports?.PrefixRoute";</script>
    <script src="~/ruoveaui/xg6rvft8p/vue/axios.min.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue-i18n.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.option.js"></script>
    <script>
        var enabledDicData= [{ label: `${Vue.prototype.i18n.t('enable')}`, value: 1, }, { label: `${Vue.prototype.i18n.t('disable')}`, value: 0, }];
        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {
                    themeV: localStorage.getItem('themeV'),
                    name: "rptdatabase",
                    pageUrl: `/rptdatabase/pages`,
                    addUrl: `/rptdatabase/add`,
                    editUrl: `/rptdatabase/update`,
                    deleteUrl: `/rptdatabase/delete`,
                    testUrl: `/rptdatabase/testConnection`,

                    // 数据源类型选项
                    dataTypeOptions: [],

                    option: {
                        searchShowBtn: Permissions.avePermission(`rptdatabase:searchBtn`),
                        refreshBtn: Permissions.avePermission(`rptdatabase:searchBtn`),
                        menuWidth: '400',
                        rowKey: 'id',
                        searchShow: false,
                        viewBtn: true,
                        columnBtn: false,
                        dialogWidth: '60%',
                        searchLabelWidth: 100,
                        labelWidth: 100,
                        dialogCustomClass: 'database-dialog',
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false},
                            { prop: "name", label: this.i18n.t('datasource_name'), search: true, hide: false, width: '120', clearable: true, rules: [{ required: true, trigger: "blur", message: this.i18n.t('please_enter_datasource_name') }]},
                            { prop: "dataType", label: this.i18n.t('datasource_type'), slot: true, search: true, hide: false, width: '120', type: "select", props: { label: "key", value: "value", }, dicUrl: `/rptdatabase/getdatatype`, rules: [{ required: true, trigger: "change", message: this.i18n.t('please_select_datasource_type') }] },
                            { prop: "connectionString", label: this.i18n.t('connection_string'), slot: true, search: false, hide: false, span: 24, overHidden: true, rules: [{ required: true, trigger: "blur", message: this.i18n.t('please_enter_connection_string') }]},
                            { prop: "isEnabled", label: this.i18n.t('status'), search: false, hide: false, value: 0, type: "radio", button: true, dicData: enabledDicData, width: '80', },
                            { prop: "remark", label: this.i18n.t('note'), type: 'textarea', hide: true, showColumn: false, span: 24, rows: 2, minRows: 4, maxRows: 4 },
                        ],
                    },
                }
            },
            created() {
                this.selectRow = {};
                this.loadDataTypeOptions();
            },
            methods: {
                // 加载数据源类型选项
                loadDataTypeOptions() {
                    this.$http.get("/rptdatabase/getDataType").then(ret => {
                        this.dataTypeOptions = ret;
                    });
                },

                // 连接测试
                handleTestConnection(row) {
                    this.$confirm(this.i18n.t('confirm_test_connection', [row.name])).then(() => {
                        this.loading = true;
                        this.$http.post("/rptdatabase/testConnection",row).then(ret => {
                            if (ret.code!=500) {
                                this.$message.success(this.i18n.t('connection_test_successful'));
                            }
                        }).catch(error => {
                            this.$message.error(this.i18n.t('connection_test_failed'));
                        }).finally(() => {
                            this.loading = false;
                        });
                    });
                },

                // 重写保存方法，添加连接测试逻辑
                handleRowSave(row, done, loading) {
                   // 先进行连接测试
                   this.loading = true;
                   this.$http.post("/rptdatabase/testConnection",row).then(ret => {
                        if (ret) {
                            this.$message.success(this.i18n.t('connection_test_success_save'));
                            // 连接测试成功，继续保存
                            curdMixin.methods.handleRowSave.call(this, row, done, loading);
                        } else {
                            this.$message.error(this.i18n.t('connection_test_failed_check'));
                            loading();
                        }
                    }).catch(error => {
                        this.$message.error(this.i18n.t('connection_test_failed_check'));
                        loading();
                    }).finally(() => {
                        this.loading = false;
                    });
                },

                // 重写更新方法，添加连接测试逻辑
                handleRowUpdate(row, index, done, loading) {
                    // 先进行连接测试
                    this.loading = true;
                    this.$http.post("/rptdatabase/testConnection",row).then(ret => {
                        if (ret) {
                            this.$message.success(this.i18n.t('connection_test_success_update'));
                            // 连接测试成功，继续更新
                            curdMixin.methods.handleRowUpdate.call(this, row, index, done, loading);
                        } else {
                            this.$message.error(this.i18n.t('connection_test_failed_check'));
                            loading();
                        }
                    }).catch(error => {
                        this.$message.error(this.i18n.t('connection_test_failed_check'));
                        loading();
                    }).finally(() => {
                        this.loading = false;
                    });
                },

                // 自定义表单对话框标题
                getFormTitle(isAdd) {
                    return isAdd ? this.i18n.t('add_datasource_config') : this.i18n.t('edit_datasource_config');
                }
            }
        });
    </script>

</body>
</html>